Sprite

昨天已經知道了container裡面會放很多sprite物件來顯示你要的圖案

sprite建立

而sprite需要圖像，圖像的來源可以有以下幾種方式：

• 單一圖像檔案
• sprite sheet，裡面放入所有需要的圖像
• 紋理貼圖(就是用JSON定義圖像大小和位置的sprite sheet)

接下來會介紹使用紋理貼圖的部分，pixi用WebGL和GPU渲染圖像，圖像需要轉換成GPU可以處理的格式，叫做紋理Texture（之後會有一天再做詳細介紹），在sprite顯示圖片以前，需要先講圖片轉化成WebGL可讀的紋理貼圖，Pixi會使用紋理緩存，儲存並加載sprite需要的紋理貼圖。

以下會介紹範例用到的屬性：

屬性 | 參數類別 | 描述
------------- | -------------
anchor | Number | 預設(0,0)，指的是sprite的左上點，數字範圍為0~1
alpha | Number | 透明度，預設1
rotation | Number | 旋轉
mask | Object | 遮罩，相當於canvas的clipping

要看更多PIXI.Sprite屬性可以看官網的介紹

小小範例

做了一個sprite的圖片緩存及旋轉

    let app = new PIXI.Application({width: 200, height: 200})
    document.body.appendChild(app.view)
    let container = new PIXI.Container() //創建容器
 
    PIXI.loader
    .add('./me.png')
    .load(setup);

    function setup() {
      let sprite = new PIXI.Sprite(
        PIXI.loader.resources['./me.png'].texture
      )
      sprite.anchor.set(0.5) //設定sprite的中心
      sprite.rotation=2 //設定sprite的旋轉
      sprite.alpha=.5 //設定sprite透明度
      app.stage.addChild(container) //先將container放入根container stage
      container.addChild(sprite) //再把圖片物件放入container
      container.x=app.screen.width/2 //將container置中
      container.y=app.screen.height/2 //將container置中
    }

成果畫面

今天在寫一些部分，隱隱約約感覺有前幾篇canvas一些方法的影子了，前面感覺沒白學～～

～如有疑問或是錯誤，歡迎不吝指教～

參考來源：
[1]http://pixijs.download/release/docs/PIXI.Sprite.html
[2]https://github.com/Zainking/learningPixi
[3]http://scottmcdonnell.github.io/pixi-examples/index.html?s=demos&f=texture-rotate.js&title=Texture%20Rotate